import React, { memo } from 'react';
import ReactECharts from 'echarts-for-react';
import 'echarts-wordcloud';
// import { Empty } from 'antd';
import Empty from '@/components/NotData';
import useWindowWidth from '@/hooks/event/use-window-width';

const WordCloudChart = memo(({ data }) => {
  const { isPc } = useWindowWidth();
  let sizeRangeMin = data.length > 50 ? 12 : 20;
  const options = {
    tooltip: {
      show: true,
      formatter: function (params) {
        return `提及${params.value}次`;
      },
    },
    series: [
      {
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '100%',
        height: '100%',
        right: null,
        bottom: null,
        sizeRange: [sizeRangeMin, 60],
        // rotationRange: [-45, 45],
        rotationRange: [-0, 0],
        rotationStep: 5,
        gridSize: isPc ? 18 : 8,
        drawOutOfBound: false,
        layoutAnimation: true,
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          color: (params) => {
            const colors = [
              // 'rgba(245, 232, 255, 0.85)', // #F5E8FF
              '#BADDFF', // #E3C7FD
              '#69B4FF', // #AF91FF
              '#3287FF', // #8C69FF
              '#1B6DFA'    // #482BD9
            ]
            const values = data.map(item => item.value);
            const maxValue = Math.max(...values);
            const minValue = Math.min(...values);

            // 处理最大值和最小值相同的情况
            if (maxValue === minValue) {
              return colors[0]; // 或者 colors[colors.length - 1] 根据需求选择
            }

            // 对数缩放（避免被极大值主导）
            const logRatio = (Math.log(params.value) - Math.log(minValue)) /
              (Math.log(maxValue) - Math.log(minValue));

            const colorIndex = Math.floor(logRatio * (colors.length - 1));
            return colors[colorIndex];
          },
        },
        data: data,
      },
    ],
  };

  return (
    <div
      style={{
        height: isPc ? 'calc(100% - 120px)' : '300px',
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '10px',
        // border: "1px solid red"
      }}
    >
      {data.length > 0 ? (
        <ReactECharts option={options} style={{ height: '100%', width: '100%' }} />
      ) : (
        <Empty/>
      )}
    </div>
  );
});

export default WordCloudChart;
